<script setup>
import {
    Edit,
    Delete
} from '@element-plus/icons-vue'

import { ref } from 'vue';

//回显活动分类
import { categoryListService } from '@/api/category'
const categorys = ref([])
//用户搜索时选中的分类id
const categoryId = ref('')
const categoryList = async () => {
    let result = await categoryListService()
    categorys.value = result.data
}
categoryList()

//回显活动
import { activityListService } from '@/api/activity';
import router from '@/router';
const activities = ref([])
const activityName = ref('')
const activityList = async () => {
    let params = {
        categoryId: categoryId.value ? categoryId.value : null,
        activityName: activityName.value ? activityName.value : null
    }
    console.log(categoryId.value)
    let result = await activityListService(params)
    activities.value = result.data
}
activityList()

//重置按钮
const clearBtn = () => {
    categoryId.value = ''
    activityName.value = ''
    activityList()
}

import { ElMessageBox, ElMessage } from 'element-plus';
import { activityJoinService } from '@/api/activity';
const joinActivity = (id) => {
    //提示，用户
    ElMessageBox.confirm(
        '是否确定报名该活动',
        '温馨提示',
        {
            confirmButtonText: '确认报名',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            //调用接口
            // console.log(id)
            let result = await activityJoinService(id);
            ElMessage({
                type: 'success',
                message: '成功报名',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消报名',
            })
        })
}

</script>

<template>
    <div>
        <!-- 搜索表单 -->
        <el-form inline>
            <el-form-item label="活动分类：">
                <el-select placeholder="请选择" v-model="categoryId" style="width: 100px" @change="activityList">
                    <el-option v-for="c in categorys" :key="c.id" :label="c.categoryName" :value="c.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="活动名:">
                <el-input v-model="activityName" style="width: 200px" @input="activityList"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="activityList">搜索</el-button>
                <el-button @click="clearBtn">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="50">
            <el-col :span="8" v-for="(item, index) in activities" :key="index">
                <el-card>
                    <table class="demo-border">
                        <tbody>
                            <tr>
                                <td class="text" style="font: bold 20px/1.5 Arial, sans-serif;">{{ item.activityName }}
                                </td>
                                <td class="text">{{ item.place }}</td>
                            </tr>
                            <tr>
                                <td style="font-weight: lighter;"><strong>内容:&nbsp;</strong>{{ item.thing }}</td>
                            </tr>
                            <tr>
                                <td style="font-weight: lighter;"><strong>截止时间:&nbsp;</strong>{{ item.endTime }}</td>
                            </tr>
                        </tbody>
                    </table>
                    <el-button type="primary" @click="joinActivity(item.id)">报名加入</el-button>
                </el-card>
                <br>
            </el-col>
        </el-row>

    </div>
    <div class="tips">tips: 报名成功后可在"已加入的搭子"中查看，发布活动可在"我的搭子"中发布</div>

</template>
<style scoped>
.tips {
    color: white;
    position: absolute;
    bottom: 85px;
}

.div {
    border-block: 1px;
}
</style>
